<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta http-equiv="imagetoolbar" content="no"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>{$video.title}  - 【66Play】一键记录你的游戏青春</title>
        <meta name="keywords" content="{$video.title},66Play"/>
        <meta name="description" content="{$video.detail}">
        <link rel="stylesheet" href="__PUBLIC__/Home/player/css/main.css">
    </head>
    <body>
        <div id="main">
            <div class="demo">
                <div id="danmup"></div>
            </div>
            
            
        </div>
        <script src="__PUBLIC__/Home/player/js/jquery-2.1.4.min.js"></script>
        <script src="__PUBLIC__/Home/player/js/jquery.shCircleLoader.js"></script>
        <script src="__PUBLIC__/Home/player/js/jquery.danmu.js"></script>
        <script src="__PUBLIC__/Home/player/js/main.js"></script>
        <script>
        $("#danmup").DanmuPlayer({
            src: "{$video.uri}",
            poster: "{$video.thumb}",
            height: "calc(100% - 40px)", //区域的高度
            width: "100%" //区域的宽度
        });

        //反射調用
        var invokeFieldOrMethod = function(element, method)
        {
        var usablePrefixMethod;
        ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
        if (usablePrefixMethod) return;
        if (prefix === "") {
        // 无前缀，方法首字母小写
        method = method.slice(0,1).toLowerCase() + method.slice(1);
        }
        var typePrefixMethod = typeof element[prefix + method];
        if (typePrefixMethod + "" !== "undefined") {
        if (typePrefixMethod === "function") {
        usablePrefixMethod = element[prefix + method]();
        } else {
        usablePrefixMethod = element[prefix + method];
        }
        }
        });
        return usablePrefixMethod;
        };
        //進入全屏
        function launchFullscreen(element)
        {
        //此方法不可以在異步任務中執行，否則火狐無法全屏
        if(element.requestFullscreen) {
        element.requestFullscreen();
        } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
        } else if(element.msRequestFullscreen){
        element.msRequestFullscreen();
        } else if(element.oRequestFullscreen){
        element.oRequestFullscreen();
        }
        else if(element.webkitRequestFullscreen)
        {
        element.webkitRequestFullScreen();
        }else{
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('danmup-danmu-div');
        var cssText = 'width:100%;height:100%;overflow:hidden;';
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
        document.IsFullScreen = true;
        }
        }
        //退出全屏
        function exitFullscreen()
        {
        if (document.exitFullscreen) {
        document.exitFullscreen();
        } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        } else if(document.oRequestFullscreen){
        document.oCancelFullScreen();
        }else if (document.webkitExitFullscreen){
        document.webkitExitFullscreen();
        }else{
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('danmup-danmu-div');
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
        }
        }
        document.getElementById('fullScreenBtn').addEventListener('click',function(){
        launchFullscreen(document.getElementById('video'));
        window.setTimeout(function exit(){
        //檢查瀏覽器是否處於全屏
        if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
        {
        }
        },5*1000);
        },false);

        var played = false;
        function _setPlay() {
            var setPlayUrl = "{:U('/Api/Video/setPlay', array('id' => $video['id'], 'appid' => $appid))}";
            if (!played) {
                $.get(setPlayUrl);
                played = true;
            }
        }

        $(function(){
            var url = "{:U('api/video/comment', ['id' => $video['id'], 'pager' => 100])}";
            $.get(url, function(data) {
                if (data.code == 200) {
                    var commentList = formatComment(data.data);
                     $("#danmup .danmu-div").danmu("addDanmu", commentList);
                }
            });
        });

        function formatComment(data) {
            var colorList = ["yello", "red", "orange", "white", "white", "white", "white", "white", "white", "white",];
            var list = [];
            $.each(data, function(index, el) {
                var colorIndex = parseInt(Math.random()*colorList.length);

                var comment = {
                    "text": el.content, 
                    "color": colorList[colorIndex], 
                    "size": 1, 
                    "position": 0, 
                    "time": index*10
                };
                list.push(comment);
            });
            return list;
        }
        </script>
        <script type="text/javascript">{:C('GLOBAL_BDHM')}</script>
    </body>
</html>